<template>
  <!-- 放置一个弹层 用来编辑新增节点 -->
  <el-dialog :title="isEdit ? '修改权限节点': '新增权限点'" :visible.sync="showDialog" @closed="btnCancel">
    <!-- 表单 -->
    <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="formData.description" style="width:90%" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="formData.enVisible"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="24" style="text-align: center;">
        <el-button size="small" type="primary" @click="confirnFn">确定</el-button>
        <el-button size="small" @click="cancelFn">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name: 'RoleDialog',
  props: {
    isEdit: { // 新增/编辑模式
      type: Boolean,
      default: false
    },
  },
  data() {
    // 校验名字是否重复(不能和当前级同名)
    const checkNameReplace = (rule,value,callback) => {
      // 新增时执行
      let res = this.permissionList.filter(item => item.pid == this.formData.pid).map(item => item.name)
      if(this.isEdit){ // 编辑模式(不能和同级同名 + 排除自己)
      // 修改模式时执行 + 覆盖数据
       res = this.permissionList.filter(item => item.pid == this.formData.pid && item.id !== this.formData.id).map(item => item.name)
      }
      res.includes(value) ? callback(new Error(`${value}已在同级中出现,请更换其他名字`)) : callback()
    }
    // 校验code码是否重复(不能和所有 code 同名)
    const checkCodeReplace = (rule,value,callback) => {
      let res = this.permissionList.map(item => item.code) // 新增时执行
      if(this.isEdit){ // 编辑时执行
        res = this.permissionList.filter(item => item.id !== this.formData.id).map(item => item.code) // 排除自己
      }
      res.includes(value) ? callback(new Error(`${value}已存在请更换其他名字`)) : callback()
    }
    return {
      permissionList: [], // 权限管理列表数据(扁平,校验用,父组件直接劫持当前组件赋值)
      formData: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型吖
      },
      showDialog: false, // dialog control
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { validator: checkNameReplace, trigger: 'blur'}
          ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' },
          { validator: checkCodeReplace, trigger: 'blur'}
          ],
        description: [{ required: true, message: '描述不能为空', trigger: 'blur' }]
      }
    }
  },
  created(){},
  mounted(){
  },
  methods: {
    // dialog 关闭时触发的事件
    btnCancel(){
      // bug: resetFields方法,只会重置当前表单项内绑定的内容字段,但是 新增/编辑用的表单字段都不一样，新增用6对,编辑用8对
      // 解决: 每次关闭 dialog 把 formData 对象,重置为初始化时的对象即可
      this.$refs.perForm.resetFields() // 清空formData对象（该方法只会清空当前表单内字段的数据,不完善,该方法在新增/编辑时会有问题)
      // this.formData 是内存里的对象, this.$options.data.formData是组件初始化时的对象(源?),它们2不是同一个对象
      this.formData = this.$options.data().formData // 重置回组件刚创建时的模样,
    },
    // dialog组件确定按钮事件(新增/编辑共用),都是把 formData 对象抛出去给父组件发请求
    confirnFn(){
      this.$refs.perForm.validate(valid => {
        if(valid){
          // 让父组件发起请求
          // 扩展运算符拷贝对象,防止一会儿使用清空方法,把 formData 对象引用的值清除了,axios发送的时候值为空就不好了
          // 把对象里的6对 key & value值拷贝成一个新对象(使用清空方法也不影响传出去的那个新对象)
          this.$emit('addpermission',{...this.formData})
          this.showDialog = false // 关闭弹窗
        }
      })
    },
    // dialog组件取消按钮事件
    cancelFn(){
      this.showDialog = false
    },
  },
  computed: {},
  components: {}
}
</script>
<style lang="less" scope>

</style>
